<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="user-popup user-wraper"
  >
    <user-verify
      v-if="currentTab == 'login_verify'"
      @currentTab="loginTab"
      @handleSuccess="handleSuccessClose"
      @close="close"
    ></user-verify>
    <user-account
      v-else-if="currentTab == 'login_account'"
      @currentTab="loginTab"
      @handleSuccess="handleSuccessClose"
      @close="close"
    ></user-account>
    <user-register
      v-else-if="currentTab == 'login_register'"
      @currentTab="loginTab"
      @handleSuccess="handleSuccessClose"
      @close="close"
    ></user-register>
    <user-pwd
      v-else-if="currentTab == 'login_password'"
      @currentTab="loginTab"
      @close="close"
    ></user-pwd>
  </el-dialog>
</template>
<script>
import UserVerify from './components/loginVerify.vue'
import UserAccount from './components/loginAccount.vue'
import UserRegister from './components/loginRegister.vue'
import UserPwd from './components/loginPwd.vue'
export default {
  components: {
    UserVerify,
    UserAccount,
    UserRegister,
    UserPwd
  },
  data() {
    return {
      currentTab: 'login_account',
      visible: false
    }
  },
  inject: ['reload'],
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    loginTab(name) {
      this.currentTab = name
    },
    // 关闭登录弹窗
    handleSuccessClose() {
      this.close()
      this.$store.commit('loading/useRouterAlive')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/user.scss';
</style>
